<template>
  <div class="collect_list">
    <nav-bar>
      <span slot="text">收藏列表</span>
    </nav-bar>
    <div class="container">
      <shop-list :shop="shopList" />
    </div>
  </div>
</template>

<script>
import ShopList from '@/components/content/shoplist/ShopList';

import { getCollectList } from '@/network/getData';
import { mapState } from 'vuex';

export default {
  data() {
    return {
      user_id: null,
      shopList: []
    };
  },
  components: { ShopList },
  computed: {
    ...mapState(['userInfo'])
  },
  mounted() {
    this.initData();
  },
  methods: {
    initData() {
      getCollectList(this.userInfo.id, 'list').then(res => {
        this.shopList = [];
        res.data.forEach(item => {
          this.shopList.push(item.shop);
        });
      });
    }
  },
  watch: {
    userInfo() {
      this.initData();
    }
  }
};
</script>

<style lang="less" scoped>
.collect_list {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #f5f5f5;
}
.container {
  position: absolute;
  top: 45px;
  width: 100%;
}
</style>
